{{#*inline "diplomacy_player_box"}}
{{!--
 box: "self"/"counterpart" for ids
 player: {flag?, adjective, name, pid, clauses}
 where clauses: (clause|{title, clauses:[clause]})*
   and clause: {type, value, name}
 }
--}}
<div class='diplomacy_player_box'>
  {{#if player.flag}}
  <img src='/images/flags/{{player.flag}}' class='flag_{{box}}' id='flag_{{box}}_{{counterpart.pid}}'>
  {{else}}
  <canvas class='flag_{{box}}' id='flag_{{box}}_{{counterpart.pid}}' width='58' height='40'></canvas>
  {{/if}}
  <div class='agree_{{box}}' id='agree_{{box}}_{{counterpart.pid}}'></div>
  <h3>{{player.adjective}} {{player.name}}</h3>
  <div class='dipl_div' >
    <div id='hierarchy_{{box}}_{{counterpart.pid}}'><a tabindex='0' class='menu-button-activator ui-button ui-widget ui-state-default ui-corner-all'><span class='ui-icon ui-icon-triangle-1-s'></span>Add Clause...</a>
      <ul class='dipl_add'>{{#each player.clauses}}
        {{#if this.title}}
          <li><div>{{this.title}}</div>
          <ul>{{#each this.clauses}}
            <li><div><a href='#' onclick='create_clause_req({{../../counterpart.pid}}, {{../../player.pid}}, {{this.type}}, {{this.value}});'>{{this.name}}</a></div></li>
          {{/each}}</ul>
          </li>
        {{else}}
          <li><div><a href='#' onclick='create_clause_req({{../counterpart.pid}}, {{../player.pid}}, {{this.type}}, {{this.value}});'>{{this.name}}</a></div></li>
        {{/if}}
      {{/each}}</ul>
    </div>
    <span class='diplomacy_gold'>Gold:<input id='{{box}}_gold_{{counterpart.pid}}' type='number' step='1' size='3' value='0'></span>
  </div>
</div>
{{/inline}}

<div id='diplomacy_dialog_{{counterpart.pid}}'>
  <div>
    Treaty clauses:<br>
    <div class='diplomacy_messages' id='diplomacy_messages_{{counterpart.pid}}'></div>
    {{> diplomacy_player_box box="self" player=self}}
    {{> diplomacy_player_box box="counterpart" player=counterpart}}
  </div>
</div>
